<template>
  <div class="container">
    <div class="scroll">
      <NavBar>
        <div slot="center">我的打卡记录</div>
      </NavBar>
      <div class="home" v-if="isShow">
        <calender :date="new Date()" style="width:90%;height:400px" @click1="click">
        </calender>
      </div>
      <NavBar>
        <div slot="center" @click="show">
          <div class="pppp">{{ day }}</div>
        </div>
      </NavBar>
      <div class="detail" v-if="hasMor">
        <div class="detail-item" @click="moveTo(MorInfo)">
          <div class="name">
            <div><img src="../../../assets/image/上午.png"></div>
            <div>上午</div>
          </div>
          <div class="detail-item1">
            <div class="loc">
              <div class="img"><img src="../../../assets/image/地点.png"></div>
              <div>{{ MorInfo[0][0].address }}</div>
            </div>
            <div class="time">
              <div class="img"><img src="../../../assets/image/时间.png"></div>
              <div> {{ MorInfo[0][0].time.split('T')[1] }}</div>
            </div>
          </div>
          <div class="more">
            <img src="../../../assets/image/向右.png" alt=""/>
          </div>
        </div>
      </div>
      <div class="detail" v-else>
        <div class="detail-item">
          <div class="name">
            <div><img src="../../../assets/image/上午.png"></div>
            <div>上午</div>
          </div>
<!--          <div class="detail-item1">-->
<!--            <div class="loc">-->
<!--              <div class="img"><img src="../../../assets/image/地点.png"></div>-->
<!--              <div></div>-->
<!--            </div>-->
<!--            <div class="time">-->
<!--              <div class="img"><img src="../../../assets/image/时间.png"></div>-->
<!--              <div></div>-->
<!--            </div>-->
<!--          </div>-->
          <div class="wran">未打卡</div>
          <div class="more">
            <img src="../../../assets/image/向右.png" alt=""/>
          </div>
        </div>
      </div>
      <div class="detail" v-if="hasAft">
        <div class="detail-item" @click="moveTo(AftInfo)">
          <div class="name">
            <div><img src="../../../assets/image/下午.png"></div>
            <div>下午</div>
          </div>
          <div class="detail-item1">
            <div class="loc">
              <div class="img"><img src="../../../assets/image/地点.png"></div>
              <div>{{ AftInfo[0][0].address }}</div>
            </div>
            <div class="time">
              <div class="img"><img src="../../../assets/image/时间.png"></div>
              <div>{{ AftInfo[0][0].time.split('T')[1] }}</div>
            </div>
          </div>
          <div class="more">
            <img src="../../../assets/image/向右.png" alt=""/>
          </div>
        </div>
      </div>
      <div class="detail" v-else>
        <div class="detail-item" @click="moveTo()">
          <div class="name">
            <div><img src="../../../assets/image/下午.png"></div>
            <div>下午</div>
          </div>
          <div class="wran">未打卡</div>
          <div class="more">
            <img src="../../../assets/image/向右.png" alt=""/>
          </div>
        </div>
      </div>
      <div class="block"></div>
      <maintabbar/>
    </div>
  </div>
</template>

<script>
import maintabbar from "../maintabbar/maintabbar";
import {requestAftInfo, requestGetLocation, requestMorInfo} from "../../../network/request";
import NavBar from "../../common/navbar/NavBar";
import {formatNumber} from '../../../utils/util'
import calender from "../../common/calender/calender";

export default {
  name: "info",
  data() {
    return {
      isShow: false,
      MorInfo: [],
      hasMor:true,
      hasAft:true,
      AftInfo: [],
      token: '',
      loc: [],
      name: ['张三', '李四', '王五', '小李', '小明', '小红'],
      day: '',

    }
  },
  computed: {
    getTime() {
      return (e) => {
        let time = e.begin
        time = JSON.stringify(time)
        let info = time.split('T')[0]
        return info.replace('"', '')
      }
    },
  },
  components: {
    maintabbar,
    calender,
    NavBar
  },
  created() {
  },
  mounted() {
    let that = this
    if (localStorage.getItem('curDate')) {
      that.day = localStorage.getItem('curDate')
    } else {
      let date = new Date()
      that.day = date.getFullYear() + '-' + formatNumber(parseInt(date.getMonth() + 1)) + '-' + formatNumber(date.getDate())
    }
    let token = localStorage.getItem('token')
    that.token = token
    requestMorInfo([token, that.day]).then(res => {
      console.log(res.data.obj)
      if (res.data.obj.length == 0) {
       that.hasMor = false
        console.log(that.hasMor)
      } else {
        that.hasMor = true
        that.MorInfo = res.data.obj
        console.log(that.hasMor)
      }
    })
    requestAftInfo([token, that.day]).then(res => {
      console.log(res.data.obj)
      if (res.data.obj.length == 0) {
        that.hasAft = false
        console.log(that.hasAft)
      } else {
        that.hasAft = true
        that.AftInfo = res.data.obj
        console.log(that.hasAft)
      }
    })
  },
  methods: {
    former() {
      this.mounted()
    },
    next() {
      this.mounted()
    },
    show() {
      this.isShow = true
    },
    click(e) {
      let that = this
      that.isShow = false
      that.day = e.fullYear + '-' + formatNumber(e.month) + '-' + formatNumber(e.day)
      localStorage.setItem('curDate', that.day)
      let token = localStorage.getItem('token')
      that.token = token
      requestMorInfo([token, that.day]).then(res => {
        console.log(res.data.obj)
        if (res.data.obj.length == 0) {
          that.hasMor = false
          console.log(that.hasMor)
        } else {
          that.hasMor = true
          that.MorInfo = res.data.obj
          console.log(that.hasMor)
        }
      })
      requestAftInfo([token, that.day]).then(res => {
        console.log(res.data.obj)
        if (res.data.obj.length == 0) {
          that.hasAft = false
          console.log(that.hasAft)
        } else {
          that.hasAft = true
          that.AftInfo = res.data.obj
          console.log(that.hasAft)
        }
      })
      // this.mounted()
    },
    moveTo(e) {
      let that = this
      // localStorage.setItem('employ', JSON.stringify(that.infos[e]))
      console.log(e[0][0])
      that.$router.push({
        path: 'detail',
        query: {
          info: e[0][0]
        }
      })
    }
  }
}
</script>

<style scoped>
.home {
  position: absolute;
  margin-top: 10px;
}

.container {
  background-image: url("../../../../src/assets/image/background.png");
  height: 100vh;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.block {
  height: 70px;
}
.wran{
  font-size: 30px;
  color: red;
  align-items: center;
}
.scroll {
  height: 100%;
  overflow: scroll;
}

.pppp {
  font-size: 20px;
}

.name {
  display: flex;
  flex-direction: row;
  font-size: 22px;
  white-space: nowrap;
  align-items: center;
  margin-left: 10px;
}

.name img {
  height: 32px;
  width: 32px;
}

.time {
  display: flex;
  flex-direction: row;
  color: black;
  margin-top: 10px;
}

.img {
  margin-top: 3px;
  margin-right: 5px;
}

.detail {
  display: flex;
  flex-direction: row;
  /*margin-bottom: 30px;*/
}

.loc {
  display: flex;
  flex-direction: row;
  color:blue;
  width: 120px;
  align-items: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.detail-item {
  background-color: rgba(255, 255, 255, 0.5);
  width: 90%;
  height: 70px;
  border-radius: 20px;
  margin: 5px 5%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.detail-item1 {
  display: flex;
  flex-direction: column;
  /*align-items: center;*/
  justify-content: space-around;
  margin-left: 90px;
  text-align: center;
}

.detail-item1 div {
  align-items: center;
}

.detail-item1 div img {
  width: 18px;
  height: 18px;
}

.more {
  display: flex;
  align-items: center;
  text-align: center;
  color: #B29999;
}

.more img {
  width: 30px;
  height: 30px;
}
</style>
